<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
       input{
           display: block;
           outline: none;
           height: 40px;
           width: 250px;
           margin: 10px auto;
       }
       #button{
           width: 140px;
           height: 50px;
           background-color: deeppink;
           margin: 10px auto;
           display: block;
           border: 0;
       }
        .sex,.role {
            width: 250px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        .sex input {
            width: 10px;
            height: auto;
            margin: 0;
            display: inline-block;
        }
        .role{
            margin-top: 10px;
            outline: none;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form>
    <input type="text" placeholder="请输入姓名" name="username" id="username">
    <input type="password" placeholder="请输入密码" name="password" id="password">
    <input type="text" placeholder="请输入电话号码" name="tel" id="tel">
    <div class="sex">
        性别:
        <input type="radio" name="sex" value="男" class="sex1">男
        <input type="radio" name="sex" value="女" class="sex1">女
    </div>
    <div class="role">
        角色：
        <select id="role">
        </select>
    </div>
    <button type="button" id="button">添加</button>
</form>
<script>
    $("#button").click(function(){
        console.log($("#role").val())
        $.ajax({
            type:"post",
            url:"/addUser",
            contentType:"application/json",
            data:JSON.stringify(
                {
                    "username":$("#username").val(),
                    "password":$("#password").val(),
                    "tel":$("#tel").val(),
                    "sex":$(".sex1:checked").val(),
                    "roleid":$("#role").val()
                }
            ),
            success:function(data){
                if (data>0){
                    alert("添加成功！")
                    location.href="user.ftl"
                }else{
                    alert("添加失败！")
                    location.href="adduser.html"
                }
            },
            error:function(){
                alert("添加失败！")
                location.href="adduser.html"
            }
        })
    })
    $(function() {
        $.ajax({
            type: "post",
            url: "/getRole",
            success: function(data) {
                let roleSelect = $("#role");

                // 清空现有选项
                roleSelect.empty();

                // 遍历返回的数据并动态添加到<select>中
                $.each(data, function(index, role) {
                    // 创建一个新的<option>元素
                    let option = $("<option></option>")
                        .val(role.roleid)
                        .text(role.rolename);

                    // 将新的<option>添加到<select>中
                    roleSelect.append(option);
                });
            },
            error: function(xhr, status, error) {
                console.error("请求失败:", status, error);
            }
        });
    });


</script>
</body>
</html>